<template>
    <div class="add-master-container">
        <h3 class="header-box">编辑集群</h3>
        <div class="form-box">
            <i class="el-icon-circle-plus-outline plus" @click="addObj"></i>
            <ul>
                <li>
                    <span>集群名称:</span>
                    <el-input placeholder="请输入内容" v-model="params.masterName" clearable></el-input>
                </li>
                <li>
                    <span>集群IP:</span>
                    <el-input placeholder="请输入内容" v-model="params.ip" clearable></el-input>
                </li>
                <li>
                    <span>端口号:</span>
                    <el-input placeholder="请输入内容" v-model="params.port" clearable></el-input>
                </li>
                <template v-for="(item, index) in standby">
                    <li :key="'ip'+index">
                        <span>备用IP{{index+1}}:</span>
                        <el-input placeholder="请输入内容" v-model="item.ip" clearable></el-input>
                    </li>
                    <li :key="'port'+index">
                        <span>备用端口号{{index+1}}:</span>
                        <el-input placeholder="请输入内容" v-model="item.port" clearable></el-input>
                    </li>
                </template>
            </ul>
            <el-button type="primary" @click="saveMaster">保存</el-button>
            <el-button @click="returnBack">返回</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'edit',
    //切换面包屑
    created() {
        this.$emit('change', this.$route.name);
    },
    data() {
        return {
            params: {
                masterName: '',
                ip: '',
                port: ''
            },
            standby: [
                {
                    ip: '',
                    port: ''
                }
            ],
            num: ''
        };
    },

    methods: {
        saveMaster() {
            //把params和standby做数据处理然后上传到服务器
            console.log(this.params, this.standby);
        },
        returnBack() {
            this.$router.go(-1);
        },
        addObj() {
            this.standby.push({
                ip: '',
                port: ''
            });
        }
    }
};
</script>

<style scoped>
.add-master-container {
    width: 900px;
    min-height: 400px;
    border: 2px solid darkorange;
    margin: 0 auto;
    font-size: 14px;
}
.header-box {
    line-height: 35px;
    height: 35px;
    background: #f0f0f0;
    padding-left: 30px;
}
.form-box {
    width: 90%;
    padding: 20px 0;
    margin: 0 auto;
    position: relative;
}
.form-box ul span {
    display: inline-block;
    min-width: 150px;
}
.form-box .plus {
    font-size: 50px;
    color: lightgray;
    position: absolute;
    right: 50px;
    top: 50px;
    cursor: pointer;
}
.form-box .el-input {
    margin: 10px 0;
    width: 50%;
}
</style>